<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__dept">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-form-item>
          <el-input
            v-model="dataForm.name"
            placeholder="产品分类"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addOrUpdateHandle()"
            >创建分类</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        row-key="id"
        lazy
        :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        border
        style="width: 100%"
        :key="isUpdate"
      >
        <el-table-column
          prop="name"
          label="产品分类名称"
          header-align="center"
          width="300"
        ></el-table-column>
        <el-table-column
          prop="product_num"
          label="商品数量"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sort"
          label="排序"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="operator_user"
          label="最后操作人"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="operator_time"
          label="最后操作时间"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          :label="$t('handle')"
          fixed="right"
          header-align="center"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.isLeaf"
              type="text"
              size="small"
              @click="addOrUpdateHandle(scope.row.id, scope.row.name)"
              >创建下级</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="addOrUpdateHandle(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteHandle(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="num"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      >
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update
        v-if="addOrUpdateVisible"
        ref="addOrUpdate"
        @refreshDataList="getDataList"
      ></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './classify-add'
import { getClassifyList } from '@/api'
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/product_classify',
        getDataListIsPage: true,
        deleteURL: '/product_classify_delete',
        deleteIsBatch: true,
        deleteSingleKey: 'id',
        isTree: true,
      },
      dataForm: {
        name: '',
      },
    }
  },
  components: {
    AddOrUpdate,
  },
  methods: {
    async load(tree, treeNode, resolve) {
      console.log(tree)
      console.log(treeNode)
      const params = {
        pid: tree.id,
        page: 1,
        num: 9999,
      }
      const res = await getClassifyList(params)
      if (res?.status === 1) {
        const data = res?.list || []
        console.log(treeNode.level)
        if (treeNode.level !== '') {
          data.forEach((item) => {
            item.hasChildren = true
            item.isLeaf = false
          })
        } else {
          data.forEach((item) => {
            item.isLeaf = true
          })
        }

        console.log(data)
        resolve(data)
      }
      // setTimeout(() => {
      //   resolve([
      //     {
      //       id: 31,
      //       date: "2016-05-01",
      //       name: "王小虎",
      //       address: "上海市普陀区金沙江路 1519 弄",
      //     },
      //     {
      //       id: 32,
      //       date: "2016-05-01",
      //       name: "王小虎",
      //       address: "上海市普陀区金沙江路 1519 弄",
      //     },
      //   ]);
      // }, 1000);
    },
  },
}
</script>
